<template>
  <div class="content" style>
    <div style="width: 100%; height: 14px"></div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#f2ce3d">
      <van-swipe-item>
        <img class="banner" src="@/assets/home/banner1.png" />
      </van-swipe-item>
      <van-swipe-item>
        <img class="banner" src="@/assets/home/banner1.png" />
      </van-swipe-item>
      <van-swipe-item>
        <img class="banner" src="@/assets/home/banner1.png" />
      </van-swipe-item>
    </van-swipe>
    <div class="apply">
      <div class="text">{{ $t("適用於") }}:</div>
      <div class="listdiv">
        <div class="imgText">
          <div class="item">
            <img src="@/assets/home/eth.png" />
            <span>Ethereum</span>
          </div>
        </div>
        <div class="imgText">
          <div class="item">
            <img src="@/assets/home/bnb.png" />
            <span>BNB Smart Chain</span>
          </div>
        </div>
        <div class="imgText">
          <div class="item">
            <img src="@/assets/home/arb.png" />
            <span>Arbitrum One</span>
          </div>
        </div>
        <div class="imgText">
          <div class="item">
            <img src="@/assets/home/zk.png" />
            <span>zkSync</span>
          </div>
        </div>
      </div>
    </div>
    <div style="width: 100%; height: 14px"></div>
    <div @click="goto('/page/trade')" class="connect">{{ $t("去交易") }}</div>
    <div class="infor">
      <img class="inforimg" src="@/assets/home/xiaoxi.png" />
      <div class="inforItem">
        <div class="left">
          <img class="leftImg" src="@/assets/home/jinbi.png" alt />
          <div class="text">
            <div>{{ $t("交易總量") }}</div>
            <div style="font-size: 24px">******</div>
          </div>
        </div>
        <img class="right" src="@/assets/home/bac1.png" alt />
      </div>
      <div class="inforItem">
        <div class="left">
          <img class="leftImg" src="@/assets/home/tax.png" alt />
          <div class="text">
            <div>{{ $t("賺取手續費") }}</div>
            <div style="font-size: 24px">******</div>
          </div>
        </div>
        <img class="right" src="@/assets/home/bac2.png" alt />
      </div>
      <div class="inforItem">
        <div class="left">
          <img class="leftImg" src="@/assets/home/tx.png" alt />
          <div class="text">
            <div>{{ $t("使用者總數") }}</div>
            <div style="font-size: 24px">14953</div>
          </div>
        </div>
        <img class="right" src="@/assets/home/bac3.png" alt />
      </div>
    </div>
    <div class="info">
      <img class="infoImg" src="@/assets/home/info1.png" alt />
      <div style="font-size: 22px">{{ $t("多鏈支持") }}</div>
      <div style="font-size: 13px; margin-top: 10px">{{ $t("兼容多鏈混合，簡單的交互介面高效安全完成交易，無需註冊") }}</div>
    </div>
    <div class="info">
      <img class="infoImg" src="@/assets/home/info2.png" alt />
      <div style="font-size: 22px">{{ $t("節省成本") }}</div>
      <div style="font-size: 13px; margin-top: 10px">
        {{ $t("以最小的價差和低價格影響進入和退出頭寸，獲得最優價格完成交易降低交易成本") }}
      </div>
    </div>
    <div class="info" style="margin-bottom: 70px">
      <img class="infoImg" src="@/assets/home/info3.png" alt />
      <div style="font-size: 22px">{{ $t("降低結算風險") }}</div>
      <div style="font-size: 13px; margin-top: 10px">
        {{ $t("高質量的價格供給使頭寸不受暫時波動影響，減少劇烈波動造成的頭寸清算") }}
      </div>
    </div>
    <div class="cooperation">
      <div class="lin">{{ $t("合作夥伴") }}</div>
      <div class="cooperationImg">
        <img class="img" src="@/assets/home/cooperation1.png" alt />
        <img class="img" src="@/assets/home/cooperation2.png" alt />
        <img class="img" src="@/assets/home/cooperation3.png" alt />
        <img class="img" src="@/assets/home/cooperation4.png" alt />
        <img class="img" src="@/assets/home/cooperation5.png" alt />
        <img class="img" src="@/assets/home/cooperation6.png" alt />
      </div>
    </div>
    <div class="icon">
      <img class="iconimg" src="@/assets/home/icon1.png" alt />
      <img class="iconimg" src="@/assets/home/icon2.png" alt />
      <img class="iconimg" src="@/assets/home/icon3.png" alt />
      <img class="iconimg" src="@/assets/home/icon4.png" alt />
    </div>
    <div class="bottm" style>Coyright © 2023 BETHEDEX</div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import i18n from "@/locales/i18n";
import store from "@/store/index";

const router = useRouter();

function goto(url) {
  router.push(url);
}
</script>

<style lang="scss" scoped>
.content {
  padding: 15px 15px 0 15px;
  background-color: #17171a;
  font-size: 20px;
  padding-top: 44px;
}

.my-swipe .van-swipe-item {
  width: 100%;
  height: 144px;

  .banner {
    width: 100%;
    height: 144px;
  }
}

.apply {
  padding: 0 5px;

  .text {
    margin-top: 30px;
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
  }

  .listdiv {
    width: 100%;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    //允许换行
    flex-wrap: wrap;

    .imgText {
      display: flex;
      align-items: center;
      width: 50%;

      .item {
        display: flex;
        align-items: center;
        height: 24px;
        // background-color: #fff;
        padding: 4px 0;

        img {
          width: 24px;
          height: 24px;
        }

        span {
          font-size: 14px;
          color: #fff;
          margin-left: 4px;
        }
      }
    }
  }
}

.connect {
  width: 100%;
  height: 43px;
  background-color: #f2ce3d;
  text-align: center;
  line-height: 43px;
  box-sizing: border-box;
  margin: 7px 0;
  border: 1px solid #f2ce3d;
  border-radius: 5px;
  font-size: 16px;
}

.infor {
  width: 100%;
  margin-top: 20px;

  .inforimg {
    width: 20px;
    height: 20px;
    margin-bottom: 20px;
  }

  .inforItem {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 104px;
    padding: 15px;
    background-color: #2e323b;
    box-sizing: border-box;
    border-radius: 10px;
    margin-bottom: 15px;

    .left {
      display: flex;
      align-items: center;
      color: #fff;

      .leftImg {
        width: 74px;
        height: 74px;
      }

      .text {
        font-size: 17px;
        margin-left: 20px;
      }
    }

    .right {
      width: 95px;
      height: 95px;
      margin: -15px -15px 0 0;
    }
  }
}

.info {
  width: 100%;
  color: #d5d5d5;
  margin-bottom: 20px;

  .infoImg {
    width: 102px;
    height: 102px;
  }
}

.cooperation {
  width: 100%;
  color: #fff;

  .lin {
    width: 100%;
    text-align: center;
    font-size: 15px;
    margin-bottom: 24px;
  }

  .cooperationImg {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    margin-bottom: 70px;

    .img {
      width: 146px;
      height: 30px;
    }
  }
}

.icon {
  display: flex;
  justify-content: space-around;
  width: 100%;
  box-sizing: border-box;
  padding: 0 80px;
  margin-bottom: 20px;

  .iconimg {
    width: 32px;
    height: 32px;
  }
}

.bottm {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 13px;
  padding-bottom: 24px;
}
</style>
